<template>
  <div>
    <el-row>
      <el-col :span="12"
        ><div class="grid-content">
          <v-chart :options="option1" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
      ></el-col>
      <el-col :span="12"
        ><div class="grid-content"><v-chart :options="option2" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
      ></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'stafftransfer',
  data() {
    return {
      option1: {
        title: {
          text: '租金支出数据趋势变动',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['12月', '11月', '10月', '9月', '8月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        label: {
          show: true,
          position: 'top',
          color: '#333333'
        },
        legend: {
          data: ['办公设备租金支出', '公务用车租金支出', '维修设备租金支出', '总租金支出'],
          bottom: 0
        },
        series: [
        {
            name: '办公设备租金支出',
            data: [12000, 10000, 9000, 11000, 9000, 10000],
            type: 'line',
            itemStyle: {
              color: '#4874cb'
            }
          },
          {
            name: '公务用车租金支出',
            data: [34500, 42029, 37895, 41023, 36892, 32894],
            type: 'line',
            itemStyle: {
              color: '#ee822f'
            }
          },
          {
            name: '维修设备租金支出',
            data: [1000, 1200, 900, 800, 1100, 700],
            type: 'line',
            itemStyle: {
              color: '#c79400'
            }
          },
          {
            name: '总租金支出',
            data: [47500, 53229, 47795, 52823, 46992, 43594],
            type: 'line',
            itemStyle: {
              color: '#73b941'
            }
          }
        ]
      },
      option2: {
        title: {
          text: '租金支出',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['12月', '11月', '10月', '9月', '8月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['办公设备租金支出', '公务用车租金支出', '维修设备租金支出', '总租金支出'],
          bottom: 0
        },
        series: [
          {
            name: '办公设备租金支出',
            data: [12000, 10000, 9000, 11000, 9000, 10000],
            type: 'bar',
            itemStyle: {
              color: '#4874cb'
            }
          },
          {
            name: '公务用车租金支出',
            data: [34500, 42029, 37895, 41023, 36892, 32894],
            type: 'bar',
            itemStyle: {
              color: '#ee822f'
            }
          },
          {
            name: '维修设备租金支出',
            data: [1000, 1200, 900, 800, 1100, 700],
            type: 'bar',
            itemStyle: {
              color: '#c79400'
            }
          },
          {
            name: '总租金支出',
            data: [47500, 53229, 47795, 52823, 46992, 43594],
            type: 'bar',
            itemStyle: {
              color: '#73b941'
            }
          }
        ]
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.grid-content {
  height: 90vh;
  margin-top: 20px;
}
.table-sty {
  margin: 20px;
}
</style>
